<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="" type="image/x-icon">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>pull down refresh</title>
    <link rel="stylesheet" href="./style.css"/>
    <link rel="stylesheet" href="./nature-pull-refresh.css"/>
</head>
<body>

<div style="position: relative;height: 100px;line-height: 100px;background-color: #fff;text-align: center;font-size: 20px;z-index: 2;">这是头部</div>

<div class="pull-wrapper">

    <div id="pullTop" class="pull-top">
        <div id="arrowIcon" class="arrow"></div>
        <div id="pullIcon" class="pointer none"></div>
        <div id="succIcon" class="success none"></div>
        <span id="pullText">刷新成功</span>
    </div>

    <div class="quan-panel has-top">
        <div class="quan-panel__bd" id="list">

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">下来刷新效果
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的下拉刷新demo
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">下来刷新效果
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的下拉刷新demo
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">下来刷新效果
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的下拉刷新demo
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">下来刷新效果
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的下拉刷新demo
                </div>
            </div>

        </div>
    </div>

</div>

<script src="./nature-pull-refresh.js"></script>
<script type="text/javascript">
    function getData () {
        setTimeout(function() {
            var str = '<div class="quan-media-box">' +
                '        <div class="quan-media-box__person">' +
                '           <img class="person_avator" src="./img/etc_img_free.png">' +
                '             <div class="person_content">' +
                '                  <div class="person_content-title">下来刷新效果' +
                '                    <span class="person_content__tag hide author">圈主</span>' +
                '                    <span class="person_content__tag top">置顶</span>' +
                '                    <span class="person_content__tag hot">精华</span>' +
                '                  </div>' +
                '                <div class="person_content-text">2017.10.28 11:37</div>' +
                '             </div>' +
                '          </div>' +
                '          <div class="quan-media-box__content ellips-content">' +
                '               原生js实现的下拉刷新demo' +
                '          </div>' +
                '       </div>', html = '';

            for (var i = 0; i < 2; i++) {
                html += str;
            }

            var temp = document.createElement('div');
            temp.innerHTML = html;
            var frag = document.createDocumentFragment();
            while (temp.firstChild) {
                frag.appendChild(temp.firstChild);
            }

            document.getElementById('list').insertBefore(frag, document.getElementById('list').firstChild);
            pull.emit('success');
        }, 1000);
    }

    var pull = new pullDownRefresh({
        wrapper: '.pull-wrapper'
    });
    pull.on('before-pull', function () {
        console.log('beforePull');
    });
    pull.on('refresh', function () {
        console.log('refresh begin');
        getData();
    });
    
</script>

</body>
</html>
